<script setup name="WordCloud">
import * as echarts from 'echarts';
import { onMounted, ref, watch } from "vue"
import 'echarts-wordcloud'

const props = defineProps({
  data: {
    type: Object,
    default: ()=>{}
  }
})
let myEcharts = ref(null)
const wordCloudRef = ref(null)
onMounted(()=>{
  myEcharts = echarts.init(wordCloudRef.value)
  render()
})
const randomRGB = () => {
  let r = Math.random() * 255
  let g = Math.random() * 255
  let b = Math.random() * 255
  return `rgb(${r},${g},${b})`
}
const render = () => {
  const options = {
		series: [
			{
				// 类型
				type: 'wordCloud',
				// 数据映射文本的大小范围
				sizeRange: [8, 46],
				// 文字旋转范围
				rotationRange: [0, 0],
				// 单词之间的间距
				gridSize: 0,
				// 渲染动画
				layoutAnimation: true,
				// 字体
				textStyle: {
					// 随机色值
					color: randomRGB
				},
				// 高亮字体
				emphasis: {
					textStyle: {
						fontWeight: 'bold',
						color: '#000'
					}
				},
				// 数据
				data: props.data.datas
			}
		]
	}
  myEcharts.setOption(options)
}

watch(()=> props.data, () => {
  render()
})

</script>

<template>
  <div>
    <div>【关键词条】</div>
		<div ref="wordCloudRef" class="w-full h-full"></div>
  </div>
</template>
<style lang='scss' scoped>

</style>